ECharts中dataZoom的使用，dataZoom滑块、手柄的高度调节

2023-08-05 08:06| 来源: 网络整理| 查看: 265

dataZoom是一个ECharts一个下滑块组件，里面有很多的属性，这里简单介绍一下。

先说如何调节dataZoom的高度：

dataZoom: [ { bottom: 10,//下滑块距离x轴底部的距离 height : 20,//下滑块手柄的高度调节 type: 'slider',//类型,滑动块插件 show: true,//是否显示下滑块 xAxisIndex: [0],//选择的x轴 start: 120, //初始数据显示多少 end: 135 //初始数据最多显示多少 } ]

属性解析目录： 1、type属性。 2、show属性。 3、showDetail属性。 4、textStyle.color属性。 5、slider.start 属性。 6、slider.end属性。 7、slider.orient属性 8、slider.zoomLock属性。 9、slider.left 属性。 10、slider.top属性。 11、slider.right属性。 12、slider.bottom属性。

1、dataZoom的slider的type属性。两个值，第一个就是slider，作用是下滑块；另一个值是inside，作用是内侧下滑块。

type属性： type = 'slider'; //表示下滑块。 type = 'inside' ;//内侧滑块。

2、show属性：

show = true; //显示组件。 show = flase; //不显示组件，但是数据过滤的功能还在。

3、showDetail属性：拖拽时。是否显示详细数值信息。

showDetail = true；//显示。 showDetail = false；//不显示。

4、textStyle.color属性：文字的颜色。

textStyle: { color: "red", fontWeight : "字体的粗细"，//可以输入属性，也可输入数值类型。数值类型为：normal、bold、boder、lighter fontStyle: "字体的风格" ，//可选择 normal、italic、obloque //这玩意没啥用，很少用到。 }

5、slider.start 属性：窗口初始显示数据的范围。

start：' 0 ~ 100' // 表示0% ~ 100%

6、slider.end属性：窗口范围结束的百分比：

end : ' 0 ~ 100' // 表示0% ~ 100%

7、slider.orient属性：设置布局方式，两种，一横一竖

orient = horizontal; // 水平。 orient = vertical; //竖直。

8、slider.zoomLock属性：是否锁定视图，或者说限制窗口的大小。

zoomLock : true //锁定选择的区域，不可以缩放，只能平移。不设置的话直接有默认值就行。

9、slider.left 属性：组件距离容器左侧的距离。默认自动：auto。

left ：'0~100' // 他的值可以为数值，也可以是百分比。

10、slider.top属性：组件距离容器上侧的距离。默认自动：auto。

top ：'0~100' // 他的值可以为数值，也可以是百分比。

11、slider.right属性：组件距离容器右侧的距离。默认自动：auto。

right ：'0~100' // 他的值可以为数值，也可以是百分比。

12、slider.bottom属性：组件距离容器下侧的距离。默认自动：auto。

bottom ：'0~100' // 他的值可以为数值，也可以是百分比。

【本文地址】

公司简介

联系我们